import React, { useEffect, useState } from "react";
import { legacy_createStore as createStore } from "redux";
const ADD = "ADD";
const MINUS = "MINUS";

const reduce = (state, action) => {
  const { number } = state;
  switch (action.type) {
    case ADD:
      return {
        number: number + 1,
      };
    case MINUS:
      return {
        number: number - 1,
      };
    default:
      return state;
  }
};

const store = createStore(reduce, { number: 1 });

const Calculator = () => {
  const [state, setState] = useState(store.getState());

  useEffect(() => {
    store.subscribe(() => {
      setState(store.getState());
    });
  }, [setState]);

  return (
    <div>
      {state?.number}
      <button onClick={() => store.dispatch({ type: ADD })}>+</button>
      <button onClick={() => store.dispatch({ type: MINUS })}>-</button>
    </div>
  );
};

function App() {
  return (
    <div>
      <Calculator />
    </div>
  );
}

export default App;
